{% extends 'layout.html' %}
{% load static %}
{% block css %}
    <style>
        body {
            background: url("{% static 'images/login-01.webp' %}") center center / cover no-repeat fixed;
        }

        .box {
            height: calc(100vh - 64px);
            min-height: 420px;
            display: flex;
            flex-direction: row;
            justify-content: right;
            align-items: center;
        }

        .wx-box {
            padding: 15px 30px 0 30px;
            background-color: white;
            border-radius: 16px;
        }

        .impowerBox .qrcode {
            width: 100px;
        }
    </style>

{% endblock %}
{% block content %}
    <div class="box">
        <div class="wx-box">
            <div id="login_container"></div>
        </div>
    </div>
{% endblock %}

{% block js %}

    <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
    <script>
        $(function () {
            new WxLogin({
                id: "login_container",
                appid: "{{ wx_auth_app_id }}",
                scope: "snsapi_login",
                stylelite: 0,
                redirect_uri: encodeURIComponent("{{ wx_auth_url }}")
            });
        })
    </script>
{% endblock %}